<template>
  <!-- 目录管理页面 -->
  <div class="app-container">
    <!-- 卡片主体区域 -->
    <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="queryVal.id">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ queryVal.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索栏 -->
      <el-row>
        <el-col :span="18">
          <!-- 搜索框 -->
          <el-col :span="11">
            <el-form ref="subjectFrom" :model="queryList" label-width="80px">
              <el-form-item label="目录名称">
                <el-input class="inputCol" v-model="queryList.directoryName"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="selectValue" placeholder="请选择">
                  <el-option label="禁用" value="0"> </el-option>
                  <el-option label="已启用" value="1"> </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" class="left-fot">
            <el-button size="small" class="colInput" plain @click="resetInput">清除</el-button>
            <el-button size="small" class="colInput" type="primary" @click="getDirectList">搜索</el-button>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button class="colright" size="mini" type="success" icon="el-icon-edit" @click="addDialogVisible = true">新增目录</el-button>
          <el-button class="colright" v-if="queryVal.id" type="text">
            <i class="el-icon-wind-power"></i>
            <span @click="$router.back()">返回学科</span>
          </el-button>
        </el-col>
      </el-row>

      <!--   消息文案  alert组件 -->
      <el-alert :title="`数据一共${counts} 条`" :closable="false" type="info" show-icon> </el-alert>

      <!--   @removeRow='getDirectList' -->
      <!-- 表格区域  组件-->
      <directory-table :directoryList="directoryList" @updateIdx="deleteList" @openEdit="getEditvalue" @removeEditRow="getDirectList" :selectValue="directoryList"></directory-table>

      <!-- 分页区域 -->
      <div class="block">
        <el-pagination
          background
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          :current-page="queryList.page"
          :pagesize="queryList.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 卡片主体区域结束 -->

    <!-- 弹框内容 -->
    <!-- 点击新增目录弹框 -->

    <el-dialog title="新增目录" width="25%" :show-close="false" center :visible.sync="addDialogVisible">
      <directorys-add v-if="addDialogVisible" :queryVal="queryVal" :selectValue="simpleList" @close="addDialogVisible = false" @updatetable="getDirectList"> </directorys-add>
    </el-dialog>

    <!-- 修改目录弹框组件 -->
    <!--  @editeValue='' -->
    <el-dialog title="修改目录" v-if="editDialogVisible" width="25%" :show-close="false" center :visible.sync="editDialogVisible">
      <directorys-edit :queryVal="queryVal" :selectValue="simpleList" @close="editDialogVisible = false" @updatetable="getDirectList" :editclick="editValue"> </directorys-edit>
    </el-dialog>
  </div>
</template>

<script>
import { remove } from '../../api/hmmm/directorys'
//请求目录
import { list } from '../../api/hmmm/directorys'
import { simple } from '../../api/hmmm/subjects'
//表格组件
import directoryTable from '../../../src/module-hmmm/components/directory-table'
//添加目录弹框组件
import directorysAdd from '../../../src/module-hmmm/components/directorys-add'
//修改目录弹框组件
import directorysEdit from '../../../src/module-hmmm/components/directorys-edit'
export default {
  name: 'directorys',
  components: { directoryTable, directorysAdd, directorysEdit },
  data() {
    return {
      // 请求的参数
      queryList: {
        page: 1, //当前页码
        pagesize: 10, //，每页几条
        directoryName: null, //目录名称
        subjectID: null, //学科ID
        state: null //禁用状态
      },

      selectValue: '', //禁用值
      total: 0,
      // 目录数据列表
      directoryList: [],
      //  简单学科
      simpleList: [],
      // 总条数
      counts: 0,
      // 添加/关闭目录的弹框
      addDialogVisible: false,
      // 修改/关闭目录的弹框
      editDialogVisible: false,
      //
      editValue: {},
      queryVal: this.$route.query //存放跳转过来的查询参数
    }
  },

  created() {
    this.getDirectList()

    this.addFrom()
  },

  methods: {
    //请求目录列表
    async getDirectList() {
      if (this.queryVal.id) {
        this.queryList.subjectID = this.queryVal.id
      }
      try {
        if (this.selectValue !== '') {
          this.queryList.state = this.selectValue
        }
        const { data: res } = await list(this.queryList)
        //请求赋值list
        this.directoryList = res.items
        this.counts = res.counts
      } catch (error) {
        console.log(error)
        this.$message.error('请求失败')
      }
    },
    //获取简单目录列表
    async addFrom() {
      let { data: res } = await simple()
      this.simpleList = res
    },

    getEditvalue(val) {
      this.editDialogVisible = true
      this.editValue = val
      console.log(this.editValue)
    },

    //点击清除输入框搜索
    resetInput() {
      this.queryList.directoryName = ''
      this.selectValue = null
      this.getDirectList()
    },
    //页码
    SizeChange(val) {
      console.log(val)
      this.queryList.pagesize = val
      this.getDirectList()
    },
    // 一页多少条数据
    CurrentChange(val) {
      this.queryList.page = val
      this.getDirectList()
    },
    //删除
    async deleteList(val) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (this.queryList.page != 1 && this.directoryList.length === 1) {
          this.queryList.page--
        }
        await remove(val)
        this.$message.success('删除成功')
        this.getDirectList()
      } catch (error) {}
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 10px;
  .left-fot {
    margin-left: 9px;
  }
  .el-row {
    margin-top: 20px;
  }
  .colInput {
    height: 35px;
  }
  .colright {
    float: right;
    height: 35px;
    margin-left: 10px;
  }

  .inputCol {
    width: 200px;
  }
  .el-form-item {
    display: inline-block;
  }
  .el-table {
    margin-top: 10px;
  }
  .el-pagination {
    float: right;
    margin-top: 20px;
  }
  .el-form {
    width: 729px;
    // width: 100%;
  }
  .el-form-item__content {
    margin-left: 10px;
  }
}
</style>
